// 注册登录页面
Vue.component("login", {
  template: "#loginTmp",
  data() {
    return {
      users: {
        username: "",
        password: "",
      },
      isSucceed: false,
    }
  },
  methods: {
    login() {      
      // let username_loc = window.localStorage.getItem("username");
      // let password_loc = window.localStorage.getItem("password");
      console.log((window.localStorage.getItem("allUsers")));
      console.log(typeof(window.localStorage.getItem("allUsers")));
      const person = JSON.parse(window.localStorage.getItem("allUsers")) || [];
      console.log(person);
      // if ((this.users.username === person.username) && (this.users.password === person.password)) {
      //   console.log("LOGIN SUCCEED!");
      //   this.isSucceed = true;
      // } else {
      //   console.log(this.username,this.password);
        
      //   this.isSucceed = false;
      //   // window.alert("LOGIN ERROR!");
      // }

      // 判断查找用户是否存在
      const userExists = person.find(user => user.username === this.users.username && user.password === this.users.password);

      console.log(userExists);
      
      if (userExists) {
        console.log("LOGIN SUCCEED!",userExists);
        this.isSucceed = true;
      } else {
        console.log(this.username,this.password);        
        window.alert("LOGIN ERROR!");
        this.isSucceed = false;
      }
      this.$emit("emitloginresult", {isSucceed: this.isSucceed})
    }
  }
})

// 注册注册页面
Vue.component("register", {
  template: "#registerTmp",
  data() {
    return {
      users: {
        username: "",
        email: "",
        password: ""
      },
      againpwd: "",
      isSucceed: false,
      // 我们有一个从 localStorage 获取的用户数组
      allUsers: JSON.parse(localStorage.getItem("allUsers")) || []
    }
  },
  methods: {
    register() {
      console.log(this.allUsers);
      
      const reg = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
      if (!reg.test(this.users.email)) {
        window.alert("请规范输入邮箱！！");
        this.isSucceed = false;
        return ;
      } else if (this.users.password !== this.againpwd) {
        window.alert("密码不一致！请重新确认密码！")
        this.againpwd = this.users.username = this.users.password = this.users.email = "";
        
        this.isSucceed = false;
        return ;
      }
      
      // 检查用户是否存在
      const userExists = this.allUsers.some(user => user.username === this.users.username || user.email === this.users.email);
      if (userExists) {
        window.alert("该用户或邮箱已存在！")
        this.isSucceed = false;
        return;
      }

      // 添加新用户到数组
      // this.allUsers.push({ ...this.users, password: "" }); // 出于安全考虑，不存储密码
      this.allUsers.push({ ...this.users}); // 不出于安全考虑，存储密码

      // 更新 localStorage
      window.localStorage.setItem("allUsers", JSON.stringify(this.allUsers));

      // window.localStorage.setItem("users", JSON.stringify(this.users));
      this.isSucceed = true;
      
      this.$emit("emitregisterresult", { isSucceed: this.isSucceed });
      // 清空表单
      this.users = { username: "", email: "", password: "" };
      this.againpwd = "";
    }
  },
})

// 注册提示框
Vue.component("tip", {
  template: "#tipTmp",
})

var vm = new Vue({
  el: "#app",
  data: {
    isLoginTip: false,
    isRegisterTip: false,
    isSucceed: false,
    componentName: "login",
    currentComponent:'login'
  },
  methods: {
    // 控制登录成功的弹窗
    handleLoginResult(value) {
      this.isSucceed = value.isSucceed;
      this.isLoginTip = true;
      setTimeout(() => {
        this.isLoginTip = false;
      }, 2000)
    },
    // 控制注册成功的弹窗
    handleRegisternResult(value) {
      this.isSucceed = value.isSucceed;
      this.isRegisterTip = true;
      setTimeout(() => {
        this.isRegisterTip = false;
      }, 2000)
    },
    // 接收登录子组件@click.prevent=$emit('switch-to-register')传来的参数
    switchToRegister() {
      this.componentName = 'register';
    },
    // 接收注册子组件@click.prevent=$emit('switch-to-login')传来的参数
    switchToLogin() {
      this.componentName = 'login';
    }

  },
  beforeCreate() {
    window.localStorage.setItem("username", "admin");
    window.localStorage.setItem("password", "123123");
  }
});